<template>
  <div class="content">
    <div class="banner">
      <div class="reader-ui" v-show="isShow">
        <van-icon name="arrow-left" @click="goBack()" class="goBack" />
        <div class="name">
          <span>{{ this.$route.query.name }}</span>
        </div>
        <div class="title">
          <span>第 {{ count }} 话</span>
        </div>
      </div>
      <div class="page-ui" v-show="isShow">
        <div class="page-btn">
          <div @click="prev()">上一章</div>
          <div @click="next($emit('nextPage', mangaImages))">下一章</div>
        </div>
      </div>
      <div class="status">
        <span class="manga-title"> 第 {{ count }} 话</span>
      </div>
      <div class="touch-btn" @click="showReaderUI()"></div>
    </div>
    <div class="image">
      <img :src="m" alt="" v-for="m in mangaImg" :key="m.id" />
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";


export default {
  props: ["id"],
  data() {
    return {
      mangaImg: [],
      locked: this.$route.query.locked,
      isShow: false,
      mangaImages: [],
      AllEplist: [],
      allId: [],
      count: this.$route.query.count,
      currentIndex: '',
      nextPageIndex: '',
    };
  },
  methods: {
    async getMangaDetail() {
      let { data } = await this.$http(
        "https://apis.netstart.cn/mbcomic/GetImageIndex?ep_id=" + this.id
      );
      this.MangaPic = data.data.images;
      for (var i = 0; i < this.MangaPic.length; i++) {
        this.MangaAllPic = data.data.images[i].path;
        let res = await this.$http(
          `https://apis.netstart.cn/mbcomic/ImageToken?urls=["${this.MangaAllPic}@660w.jpg"]`
        );
        this.MangaPath = res.data.data[0];
        let pic = await this.$http(
          `${this.MangaPath.url}?token=${this.MangaPath.token}`
        );
        this.mangaImg.push(pic.config.url);

      }
    },
    async getNextMangaDetail() {

      let { data } = await this.$http(
        "https://apis.netstart.cn/mbcomic/GetImageIndex?ep_id=" + this.AllEplist[this.currentIndex]
      );
      this.MangaPic = data.data.images;
      for (var i = 0; i < this.MangaPic.length; i++) {
        this.MangaAllPic = data.data.images[i].path;
        let res = await this.$http(
          `https://apis.netstart.cn/mbcomic/ImageToken?urls=["${this.MangaAllPic}@660w.jpg"]`
        );
        this.MangaPath = res.data.data[0];
        let pic = await this.$http(
          `${this.MangaPath.url}?token=${this.MangaPath.token}`
        );
        this.mangaImg.push(pic.config.url);
      }
    },
    async getDetailUrl() {
      let { data } = await this.$http(
        "https://apis.netstart.cn/mbcomic/ComicDetail?comic_id=" + this.$route.query.abc
      );
      this.detailUrl = data.data;
      this.epList = data.data["ep_list"].reverse();
      for (let e = 0; e < this.epList.length; e++) {
        this.AllEplist.push(this.epList[e].id);
      }
      // console.log(this.epList);

    },
    getThisIndex() {
      let getData = localStorage.getItem(this.$route.query.abc).split('|')
      this.currentIndex = getData.indexOf(this.id)
    },
    showReaderUI() {
      if (this.isShow) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    prev() {
      if (this.currentIndex == 0) {
        Toast.fail('已经是第一章了');
        return
      }
      this.currentIndex--
      this.count = this.epList[this.currentIndex]['short_title']
      this.locked = this.epList[this.currentIndex]['is_locked']
      this.lastId = this.epList[this.currentIndex].id
      // console.log(this.locked);
      this.isShow = false

      this.ifLastTime = JSON.parse(localStorage.getItem('code')) || []
      let lastCode = {
        id: this.lastId,
        code: this.count,
        locked: this.locked,
        comic_id: this.$route.query.abc
      }
      // console.log(this.lastCode.id);
      this.ifLastTime = [lastCode, ...this.ifLastTime.filter((l) => l.comic_id !== lastCode.comic_id)]
      localStorage.setItem('code', JSON.stringify(this.ifLastTime))
    },
    next() {
      this.currentIndex++
      this.count = this.epList[this.currentIndex]['short_title']
      this.locked = this.epList[this.currentIndex]['is_locked']
      this.lastId = this.epList[this.currentIndex].id
      // console.log(this.count);
      this.isShow = false


      this.ifLastTime = JSON.parse(localStorage.getItem('code')) || []
      let lastCode = {
        id: this.lastId,
        code: this.count,
        locked: this.locked,
        comic_id: this.$route.query.abc
      }
      // console.log(this.lastCode.id);
      this.ifLastTime = [lastCode, ...this.ifLastTime.filter((l) => l.comic_id !== lastCode.comic_id)]
      localStorage.setItem('code', JSON.stringify(this.ifLastTime))
    },

    goBack() {
      this.$router.go(-1);
    },
  },

  mounted() {
    this.getThisIndex()
    this.getDetailUrl();
    this.getMangaDetail();
    Toast.loading({
      message: "加载中...",
    });
    if (this.locked == "true") {
      Dialog.confirm({
        title: "后续精彩内容",
        message: "请传送至哔哩哔哩漫画 APP 阅读",
      })
        .then(() => {
          this.goBack();
        })
        .catch(() => {
          this.goBack();
        });
    }
    this.lastCode = JSON.parse(localStorage.getItem('code'));

    this.lastCodeIndex = this.lastCode.findIndex(c => c.comic_id == this.id)

    if (this.lastCodeIndex == -1) {
      return
    }
  },
  watch: {
    currentIndex(newValue, oldValue) {
      if (newValue != oldValue) {
        this.mangaImg = []
        this.getNextMangaDetail()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;

  .banner {
    width: 100%;

    .reader-ui {
      width: 100%;
      height: 48px;
      padding: 0 17px;
      background-color: #1e212c;
      color: #fff;
      line-height: 48px;
      position: fixed;
      top: 0;
      display: flex;

      .goBack {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin: auto 0;

        &::before {
          width: 24px;
          height: 24px;
        }
      }

      .name {
        max-width: 160px;
        height: 48px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .title {
        font-size: 12px;
        margin-left: 10px;
      }
    }

    .page-ui {
      width: 100%;
      height: 48px;
      background-color: #1e212c;
      color: #fff;
      line-height: 48px;
      position: fixed;
      bottom: 0;
      z-index: 20;

      .page-btn {
        width: 375px;
        margin: 0 auto;
        display: flex;

        div {
          flex: 1;
          text-align: center;
          line-height: 48px;
        }
      }
    }

    .status {
      height: 16px;
      padding: 2px 10px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.6);
      font-size: 12px;
      position: fixed;
      bottom: 0;
      right: 0;
      border-radius: 5px 0 0 0;

      .manga-title {
        margin-left: 10px;
      }
    }

    .touch-btn {
      width: 180px;
      height: 180px;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      position: fixed;
    }

  }

  .image {
    width: 375px;
    margin: 0 auto;

    img {
      width: 100%;
    }
  }
}
</style>